<script setup lang="ts">
import { ref, watch, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

const activeTab = ref()
const selectedItem = ref()
const showSession = ref(false)
const movieSeatsInfo = ref({
    id: 1,
    name: '电影1',
    date: '2025-05-10 10:00',
    title: 'aaa',
    desc: '120 mins',
    children: [
        {
            id: 11,
            name: '电影1',
            beginTime: '10:00',
            endTime: '12:00',
            type: '2D',
            place: '2号厅',
            price: '100元',
            status: '热映中'
        },
        {
            id: 22,
            name: '电影1',
            beginTime: '10:00',
            endTime: '12:00',
            type: '2D',
            place: '2号厅',
            price: '100元',
            status: '热映中'
        }
    ]
})

const sessionList = ref([
    {
        id: 1,
        time: '10:00',
        type: '2D',
        price: '100元',
    }
])
const seatsList = ref([
    {
        id: 1,
        name: '1号排',
        seats: [
            {
                id: 1,
                name: '1号排',
                status: ''
            },
            {
                id: 1,
                name: '1号排',
                status: 1
            }
        ]
    },
    {
        id: 2,
        name: '2号排',
        seats: [
            {
                id: 1,
                name: '2号排',
                status: 2
            },
            {
                id: 1,
                name: '1号排',
                status: 1
            }
        ]
    }
])
// 监听 navTitle 的变化，更新导航栏标题
watch(selectedItem, (newSelectedItem) => {
//   uni.setNavigationBarTitle({
//     title: newSelectedItem
//   })
})

const hasSelectedSeats = computed(() => {
    return seatsList.value.some(item => item.seats.some(singleItem => singleItem.status === 1))
})
onLoad((options) => {
    selectedItem.value = options.id
})

const onSelectSeats = (status) => {
    if (status === '热映中') {
        // 购买
        uni.navigateTo({
            url: '/pages-home/ticketSeats?id=22'
        })
    } else {
        // 想看
    }
}
const changeSession = () => {
    showSession.value = !showSession.value
}
const onSeatsSelect = (singleItem) => {
    if (singleItem.status === 1) {
        // 已选择,则清空
        singleItem.status = ''
    } else if (singleItem.status === 2) {
        // singleItem.status = 1
    } else {
        singleItem.status = 1
    }
}
const onSelected = () => {
    if (hasSelectedSeats.value) {
        uni.navigateTo({
            url: '/pages-home/orderConfirm'
        })
    }
}
</script>

<template>
    <view>
        <wd-tabs v-model="activeTab" slidable="always">
            <block>
                <view>
                    <view class="view-top">
                        <view class="flex justify-between items-center">
                            <view>
                                <view>{{movieSeatsInfo.name}}</view>
                                <view class="flex">
                                    <view>{{movieSeatsInfo.date}}</view>
                                    <view>{{movieSeatsInfo.type}}</view>
                                </view>
                            </view>
                            <view>
                                <view class="flex items-center" @click="changeSession">
                                    <wd-button type="text">更换场次</wd-button>
                                    <wd-icon :name="showSession ? 'arrow-up' : 'arrow-down'" size="22px"></wd-icon>
                                </view>
                            </view>
                        </view>
                        <view v-show="showSession">
                            <view v-for="sessionItem in sessionList" :key="sessionItem.id">
                                <view>{{ sessionItem.time }}</view>
                                <view>{{ sessionItem.type }}</view>
                                <view class="red">{{ sessionItem.price }}</view>
                            </view>
                        </view>
                    </view>
                    <view class="view-session pb-4">
                        <view class="text-center">荧幕</view>
                        <view class="mb-4 seats-container m-4 p-4">
                            <view v-for="seatsItem in seatsList" :key="seatsItem.id" class="flex items-center justify-center gap-2 mb-2">
                                <view v-for="singleItem in seatsItem.seats" class="seats-item text-center relative" @click="onSeatsSelect(singleItem)">
                                    <view :class="['icon', 'iconfont', {'icon-m-seats':!singleItem.status,'icon-m-seats-yx':singleItem.status===1,'icon-m-seats-ys':singleItem.status===2}]" style="font-size: 24px;"></view>
                                    <!-- <view class="seats-index absolute">{{ singleItem.id }}</view> -->
                                </view>
                            </view>
                        </view>
                        <view class="flex justify-center items-center gap-4">
                            <view class="flex gap-1">
                                <view class="color-block seletable-area"></view>
                                <view>可选</view>
                            </view>
                            <view class="flex gap-1">
                                <view class="color-block seleted-area"></view>
                                <view>已选</view>
                            </view>
                            <view class="flex gap-1">
                                <view class="color-block saled-area"></view>
                                <view>已售</view>
                            </view>
                            <view class="flex gap-1">
                                <view class="color-block disabled-area"></view>
                                <view>不可选</view>
                            </view>
                        </view>
                    </view>
                    <view class="seats-footer">
                        <wd-button block :round="false" :disabled="!hasSelectedSeats" @click="onSelected">{{hasSelectedSeats ? '确认选座' : '请选座位'}}</wd-button>
                    </view>
               </view>
            </block>
        </wd-tabs>
    </view>
</template>

<style>
.view-session {
    background: #ececec;
    border-radius: 4px;
}
.seats-item {
    width: 20px;
    height: 20px;
    border-radius: 4px;
}

.seats-container {
    background-color: #fff;
    border-radius: 4px;
}
.color-block {
    width: 20px;
    height: 20px;
    border-radius: 4px;
}
.seletable-area {
    background: #fff;
}
.seleted-area  {
    background: green;
}
.saled-area {
    background: red;
}
.disabled-area {
    background: #ccc;
}
.icon-m-seats-ys {
    color: red;
}
.icon-m-seats-yx {
    color: green;
}
</style>

<route type="page" lang="json">
{
  "layout": "tabbar",
  "name": "购票选座",
  "style": {
    "navigationBarTitleText": "购票选座"
  }
}
</route>